<!--
 * @Author: 码上talk|RC
 * @Date: 2021-07-03 15:34:12
 * @LastEditTime: 2021-07-21 08:33:53
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/components/tabs/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="tabs">
    <slot></slot>
    <view class="tabs-slider" :style="tabsStyle"></view>
  </view>
</template>

<script>
export default {
  name: 'Tabs',
  components: {},
  props: {
    tabIndex: [Number],
    sliderWidth: String
  },
  model: {
    prop: 'tabIndex',
    event: 'input'
  },
  provide () {
    return {
      tabs: this
    }
  },
  data () {
    return {
      curTab: 0,
      tabItemArr: [],
      slider: {
        left: '',
        width: ''
      }
    }
  },
  computed: {
    tabsStyle () {
      let width = typeof this.slider.width == 'string' ? this.slider.width : `${this.slider.width}px`
      return `left: ${this.slider.left};width: ${width}`
    }
  },
  created () {
    this.curTab == this.tabIndex
  },
  onReady () {
  },
  mounted () { },
  methods: {
    updateSlider () {
    },
    addTabItem (tabItemInfo) {
      this.tabItemArr.push(tabItemInfo)
      if (this.curTab == tabItemInfo.name) {
        this.slider.width = this.sliderWidth ? this.sliderWidth : tabItemInfo.nodeInfo.width
        this.slider.left = `calc(${tabItemInfo.nodeInfo.left}px + ${tabItemInfo.nodeInfo.width / 2}px)`
      }
    },
    setCurTab (tabName, nodeInfo) {
      this.curTab = tabName
      // this.updateSlider()
      this.slider.left = `calc(${nodeInfo.left}px + ${nodeInfo.width / 2}px)`

      this.slider.width = this.sliderWidth ? this.sliderWidth : nodeInfo.width
      this.$emit('change', tabName)

    }
  }
}
</script>
<style lang="less" >
.tabs {
  .flexLayout(@j:center);
  position: relative;
  padding: 0 @box-gap;
  tab-item {
    flex: 1;
    &:not(:first-of-type) {
      margin-left: 24rpx;
    }
  }
  .tabs-slider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30rpx;
    height: 6rpx;
    border-radius: 3rpx;
    background: @color-theme;
    transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transform: translateX(-50%);
  }
}
</style>
